<template>
    <div class="wrap is_animate_demo" :data-animate="animate" @mouseenter="selected = active = true" @mouseleave="mouseLeave">
        <span class="txt animate__animated" :class="{[animate]: active}" @animationend="animationEnd">{{ getTranslatedName(animate.split('__')[1]) }}</span>
    </div>
</template>

<script>
// 动画名称翻译映射
const ANIMATE_NAME_MAP = {
    // Attention seekers
    'none': '无动画',
    'bounce': '弹跳',
    'flash': '闪烁',
    'heartBeat': '心跳',
    'rubberBand': '橡皮筋',
    'shakeX': '左右摇晃',
    'shakeY': '上下摇晃',
    'swing': '摆动',
    'tada': '塔达',
    'wobble': '摇摆',
    'pulse': '脉冲',
    'headShake': '摇头',
    
    // Back entrances
    'backInDown': '向下进入',
    'backInLeft': '从左进入',
    'backInRight': '从右进入',
    'backInUp': '向上进入',
    
    // Bouncing entrances
    'bounceIn': '弹跳进入',
    'bounceInDown': '向下弹跳进入',
    'bounceInLeft': '从左弹跳进入',
    'bounceInRight': '从右弹跳进入',
    'bounceInUp': '向上弹跳进入',
    
    // Fading entrances
    'fadeIn': '淡入',
    'fadeInDown': '向下淡入',
    'fadeInDownBig': '大幅向下淡入',
    'fadeInLeft': '从左淡入',
    'fadeInLeftBig': '大幅从左淡入',
    'fadeInRight': '从右淡入',
    'fadeInRightBig': '大幅从右淡入',
    'fadeInUp': '向上淡入',
    'fadeInUpBig': '大幅向上淡入',
    'fadeInTopLeft': '从左上淡入',
    'fadeInTopRight': '从右上淡入',
    'fadeInBottomLeft': '从左下淡入',
    'fadeInBottomRight': '从右下淡入',
    
    // Flippers
    'flip': '翻转',
    'flipInX': 'X轴翻转进入',
    'flipInY': 'Y轴翻转进入',
    
    // Lightspeed
    'lightSpeedInRight': '从右快速进入',
    'lightSpeedInLeft': '从左快速进入',
    
    // Rotating entrances
    'rotateIn': '旋转进入',
    'rotateInDownLeft': '左下旋转进入',
    'rotateInDownRight': '右下旋转进入',
    'rotateInUpLeft': '左上旋转进入',
    'rotateInUpRight': '右上旋转进入',
    
    // Specials
    'jackInTheBox': '突然出现',
    'rollIn': '翻滚进入',
    
    // Zooming entrances
    'zoomIn': '放大进入',
    'zoomInDown': '向下放大进入',
    'zoomInLeft': '从左放大进入',
    'zoomInRight': '从右放大进入',
    'zoomInUp': '向上放大进入',
    
    // Sliding entrances
    'slideInDown': '向下滑入',
    'slideInLeft': '从左滑入',
    'slideInRight': '从右滑入',
    'slideInUp': '向上滑入',
    
    // Bouncing exits
    'bounceOut': '弹跳退出',
    'bounceOutDown': '向下弹跳退出',
    'bounceOutLeft': '从左弹跳退出',
    'bounceOutRight': '从右弹跳退出',
    'bounceOutUp': '向上弹跳退出',
    
    // Fading exits
    'fadeOut': '淡出',
    'fadeOutDown': '向下淡出',
    'fadeOutDownBig': '大幅向下淡出',
    'fadeOutLeft': '从左淡出',
    'fadeOutLeftBig': '大幅从左淡出',
    'fadeOutRight': '从右淡出',
    'fadeOutRightBig': '大幅从右淡出',
    'fadeOutUp': '向上淡出',
    'fadeOutUpBig': '大幅向上淡出',
    'fadeOutTopLeft': '从左上淡出',
    'fadeOutTopRight': '从右上淡出',
    'fadeOutBottomLeft': '从左下淡出',
    'fadeOutBottomRight': '从右下淡出',
    
    // Flippers
    'flipOutX': 'X轴翻转退出',
    'flipOutY': 'Y轴翻转退出',
    
    // Lightspeed
    'lightSpeedOutRight': '从右快速退出',
    'lightSpeedOutLeft': '从左快速退出',
    
    // Rotating exits
    'rotateOut': '旋转退出',
    'rotateOutDownLeft': '左下旋转退出',
    'rotateOutDownRight': '右下旋转退出',
    'rotateOutUpLeft': '左上旋转退出',
    'rotateOutUpRight': '右上旋转退出',
    
    // Specials
    'rollOut': '翻滚退出',
    'hinge': '铰链',
    
    // Zooming exits
    'zoomOut': '缩小退出',
    'zoomOutDown': '向下缩小退出',
    'zoomOutLeft': '从左缩小退出',
    'zoomOutRight': '从右缩小退出',
    'zoomOutUp': '向上缩小退出',
    
    // Sliding exits
    'slideOutDown': '向下滑出',
    'slideOutLeft': '从左滑出',
    'slideOutRight': '从右滑出',
    'slideOutUp': '向上滑出',
    
    // Back exits
    'backOutDown': '向下退出',
    'backOutLeft': '从左退出',
    'backOutRight': '从右退出',
    'backOutUp': '向上退出'
}

export default {
    name: 'animate-item',
    props: {
        animate: String
    },
    data() {
        this.timer = null
        this.selected = false
        return {
            active: false
        }
    },
    methods: {
        mouseLeave() {
            clearTimeout(this.timer)
            this.selected = this.active = false
        },
        animationEnd() {
            this.active = false
            if (this.selected) this.timer = setTimeout(() => {this.active = true}, 500)
        },
        getTranslatedName(name) {
            return ANIMATE_NAME_MAP[name] || name
        }
    }
}
</script>

<style lang="scss" scoped>
@import "../assets/scss/variables";

.wrap {
    height: 3.2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: $clightfont;
    border: 1px solid $cborder;
    cursor: pointer;
    user-select: none;
    margin-bottom: 1rem;
    overflow: hidden;
    .txt {
        pointer-events: none;
        user-select: none;
        font-size: 0.6rem;
        text-align: center;
    }
}
</style>